<template>
  <Modal
    v-model="guideImgModal.show"
    :title="title"
    :width="guideImgModal.width"
    :z-index="zIndex"
    footer-hide
    @on-cancel="closeModal"
  >
    <div class="scaleNum" v-show="guideImgModal.showScale">{{ imgScale * 100 + '%' }}</div>
    <div
      v-if="guideImgModal.show"
      class="dropEle"
      ref="dropEle"
      @mousewheel="handleMousewheel"
      @DOMMouseScroll="handleMousewheel"
      @mouseup="drop"
      @mousedown="drag"
      @mousemove="handleMousemove"
      :style="{ width: guideImgModal.width - 32 + 'px', height: guideImgModal.height - 32 + 'px' }"
    >
      <img
        ref="dragEle"
        class="dragEle"
        :src="guideImgModal.src"
        alt="图片"
        ondragstart="return false;"
      />
    </div>
  </Modal>
</template>
<script>
export default {
  name: 'ImgView',
  props: {
    zIndex: {
        type: Number,
        default: 1000
    },
    title:{
      type:String,
      default:'图片'
    }
  },
  components: {},
  data() {
    return {
      guideImgModal: {
        show: false,
        width: 700,
        height: 500,
        minWidth: 700,
        minHeight: 500,
        imgWidth: 'auto',
        imgHeight: 'auto',
        src: '',
        showScale: false
      },
      imgScale: 1,
      tLeft: '',
      tTop: '',
      dragEle: '',
      dropEle: ''
    };
  },
  computed: {},
  watch: {},
  created() {},
  updated() {},
  mounted() {},
  beforeDestroy() {},
  updated() {},
  methods: {
    showModal(viewImg) {
      this.viewImg = viewImg;
      let imgWidth = this.viewImg.naturalWidth; //图片宽度
      let imgHeight = this.viewImg.naturalHeight; //图片高度
      this.guideImgModal.show = true;
      this.imgScale = 1;
      this.guideImgModal.src = this.viewImg.src;
      setTimeout(() => {
        this.dragEle = this.$refs.dragEle;
        this.dropEle = this.$refs.dropEle;
        //modal 初始宽高
        let width = imgWidth + 32;
        let height = imgHeight + 32;
        let minWidth = this.guideImgModal.minWidth;
        let minHeight = this.guideImgModal.minHeight;
        let maxWidth = Math.ceil(window.innerWidth * 0.8);
        let maxHeight = Math.ceil(window.innerHeight * 0.8);
        let wRadio = maxWidth / width;
        let hRadio = maxHeight / height;
        if(width > maxWidth && wRadio < hRadio){
          width = maxWidth;
          height = imgHeight * wRadio;
          // imgWidth = width - 32;
          // imgHeight = height - 32;
        }else if(height > maxHeight && wRadio > hRadio){
          height = maxHeight;
          width = imgWidth * hRadio;
          // imgWidth = width - 32;
          // imgHeight = height - 32;
        }
        this.guideImgModal.width = width < minWidth ? minWidth : width;
        this.guideImgModal.height = height < minHeight ? minHeight : height;
        //图片 初始宽高
        this.guideImgModal.imgWidth = imgWidth;
        this.guideImgModal.imgHeight = imgHeight;
        //居中显示
        let posl = this.guideImgModal.width - 32 - imgWidth;
        let post = this.guideImgModal.height - 32 - imgHeight;
        this.dragEle.style.left = posl / 2 + 'px';
        this.dragEle.style.top = post / 2 + 'px';
      });
    },
    handleMousewheel(e) {
      this.guideImgModal.showScale = true;
      e.preventDefault();
      let dragEle = this.dragEle;
      let dropEle = this.dropEle;
      let posl = dragEle.getBoundingClientRect().left - dropEle.getBoundingClientRect().left;
      let post = dragEle.getBoundingClientRect().top - dropEle.getBoundingClientRect().top;
      if (e.wheelDelta) {
        //判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) {
          //当滑轮向上滚动时
          this.imgScale = this.imgScale + 0.25;
          dragEle.style.left = posl - this.guideImgModal.imgWidth * 0.25 * 0.5 + 'px';
          dragEle.style.top = post - this.guideImgModal.imgHeight * 0.25 * 0.5 + 'px';
        }
        if (e.wheelDelta < 0) {
          //当滑轮向下滚动时
          if (this.imgScale <= 0.25) {
            return;
          }
          this.imgScale = this.imgScale - 0.25;
          dragEle.style.left = posl + this.guideImgModal.imgWidth * 0.25 * 0.5 + 'px';
          dragEle.style.top = post + this.guideImgModal.imgHeight * 0.25 * 0.5 + 'px';
        }
      } else if (e.detail) {
        //Firefox滑轮事件
        console.log(e.detail);
        if (e.detail < 0) {
          //当滑轮向上滚动时
          this.imgScale = this.imgScale + 0.25;
          dragEle.style.left = posl - this.guideImgModal.imgWidth * 0.25 * 0.5 + 'px';
          dragEle.style.top = post - this.guideImgModal.imgHeight * 0.25 * 0.5 + 'px';
        }
        if (e.detail > 0) {
          //当滑轮向下滚动时
          if (this.imgScale <= 0.25) {
            return;
          }
          this.imgScale = this.imgScale - 0.25;
          dragEle.style.left = posl + this.guideImgModal.imgWidth * 0.25 * 0.5 + 'px';
          dragEle.style.top = post + this.guideImgModal.imgHeight * 0.25 * 0.5 + 'px';
        }
      }
      dragEle.style.width = this.imgScale * this.guideImgModal.imgWidth + 'px';
      dragEle.style.height = this.imgScale * this.guideImgModal.imgHeight + 'px';
      setTimeout(() => {
        this.guideImgModal.showScale = false;
      }, 2000);
    },
    handleMousemove(ev) {
      ev.preventDefault();
      ev.stopPropagation();
      let pos1 = this.dragEle.getBoundingClientRect();
      if (!this.dragging) {
        return;
      }
      let ele = this.dropEle;
      let pos = ele.getBoundingClientRect();
      let left = ev.clientX - pos.left - this.tLeft;
      let top = ev.clientY - pos.top - this.tTop;
      this.dragEle.style.left = left + 'px';
      this.dragEle.style.top = top + 'px';
    },
    drag(ev) {
      if (ev.target.nodeName != 'IMG') {
        return;
      }
      this.dragging = true;
      let ele = this.dragEle;
      let pos = ele.getBoundingClientRect();
      this.tLeft = ev.clientX - pos.left; //鼠标按下时和选中元素的坐标偏移:x坐标
      this.tTop = ev.clientY - pos.top;
      ele.style.cursor = 'grab';
    },
    drop(ev) {
      ev.stopPropagation();
      this.dragging = false;
      this.dragEle.style.cursor = 'auto';
    },
    closeModal() {
      this.guideImgModal.show = false;
    }
  },
  destroyed() {}
};
</script>
<style scoped>
.scaleNum {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 5px;
  border-radius: 10px;
  z-index: 999;
}
.dropEle {
  position: relative;
  overflow: hidden;
  background: #eee;
}
.dragEle {
  position: absolute;
  max-width: none;
}
</style>
